﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Grafica Funciones</title>
    <link rel="stylesheet" href="estilos.css" />
    <script type="text/javascript" src="script.js"></script> 	
    <script type="text/javascript" src="storage.js"></script></head>
<body>
    <hgroup id="titulo">
        <h1>Graficador de Funciones</h1>
        <h4>Lineales - Cuadraticas</h4>
    </hgroup>
    <article id="marco">
        <!--Se coloco un form para poder hacer recuperacion de datos del storage-->
        <form name="valoresFuncion">
            <!--el select se coloco dentro del form para poder recuperar el tipo de funcion que utilizo el usuario-->
            <br />
            Selecciona la funci&oacute;n para graficar:        
            <br />
            <label class="lbl" for="tipoFuncion">Funcion: </label>
            <select id="tipoFuncion" name="funcion" onchange="setTipoFuncion(this.value)">
                <option value="">Seleccione una funci&oacute;n</option>
                <option value="1">Lineal</option>
                <option value="2">Cuadr&aacute;tica</option>
            </select>

            <section id="datos">
            </section>
            <section id="rangoXY">
                <label id="incrementos" for="txtIncrementos">Incremento = </label>
                <input type="text" id="txtIncrementos" required="required" class="cajasDeTextos" />
                <br />

                <!--Inputs de tipo rango para limite inferior y superior-->
                <label id="lblRangoInf" for="rangoInf">Limite Inferior = </label>
                <input type="range" id="rangoInf" value="0" min="-30" max="30" onchange="setLimiteInf()" />
                <label id="lblValorRangoInf">= 0  </label>

                <label>&nbsp;&nbsp;&nbsp;&nbsp;</label>

                <label id="lblRangoSup" for="rangoSup">Limite Superior = </label>
                <input type="range" id="rangoSup" value="0" min="-30" max="30" onchange="setLimiteSup()" />
                <label id="lblValorRangoSup" >= 0  </label>

            </section>
        </form>

        <section id="dibujo">
            <br />
            <input type="button" id="btnGraficar" value="Graficar Funci&oacute;n" class="botones" onclick="dibujarFuncion()" />
            <br />
            <br />
            <canvas id="lienzo" height="450" width="600"></canvas>
            <br />
            <br />
            <input type="button" id="btnLimpiarLienzo" value="Limpiar Lienzo" class="botones" onclick="limpiaCanvas()" />
            <input type="button" id="btnGuardarLocal" value="Guardar Datos" class="botones" onclick="store();" />
            <input type="button" id="btnBorrarLocal" value="Borrar Datos" class="botones" onclick="clearData();" />
            <input type="button" id="btnRecuperarLocal" value="Recuperar Storage" class="botones" onclick="recuperarStorage();" />
        </section>
    </article>
    <footer>© 2013 -   &#35;Eduardo Garc&iacute;a   &#35;Jes&uacute;s Quintero  &#35;Juan Sainz    -   Todos los derechos reservados</footer>
</body>
</html>
